<template>
    <MkPanel title="输血前检验" style="padding: 2px 5px;  overflow-x: auto; ">
        <template #header>
            <div style="padding-top:10px">输血前检验</div>
            <div class="editBox" @click="edit">
                <i class="fa fa-pencil" style="font-size: medium;" />
            </div>
        </template>
        <div v-for="item in list" class="text" style="padding: 5px 0px; border-bottom: 1px solid #f4f4f4;">
            <el-text size="medium" class="text" style="width: 120px; text-align: right; color:#253e6d">
                {{ item.mingCheng }}：
            </el-text>
            <el-text class="text" style="font-size: medium; width: 80px;">
                <el-tag v-if="item.tag == '阳'" style="font-size: medium;" type="danger" effect="dark">
                    {{ item.jieGuo }}
                    <span style="font-size: small;" v-html="formatUnit(item.danWei)"></span>
                </el-tag>
                <span v-else>
                    {{ item.jieGuo }}
                    <span style="font-size: xx-small;" v-html="formatUnit(item.danWei)" v-if="item.jieGuo" />
                </span>
            </el-text>
            <el-text size="medium" class="text" style="width: 10px;">
                <i class="fa fa-long-arrow-down" style="color:blueviolet" v-if="item.tag == '向下'" />
                <i class="fa fa-long-arrow-up" style="color: red;" v-if="item.tag == '向上'" />
            </el-text>
            <el-text size="small" class="text" style="width: 100px;" v-if="item.jieGuo">
                {{ timeFormat(item.jianYanShiJian, 'YY-MM-DD HH:mm') }}
            </el-text>
        </div>
        <MkDialogEdit ref="dialogRef" @submit="submit" v-model:isEdit="isEdit">
            <MkForm formId="mkPatient" label-width="250px">
                <el-form-item v-for="item in listEdit" :label="item.mingCheng">
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <MkInput v-model.trim="item.jieGuo" :isEdit="isEdit" append>
                                <template #append>
                                    <span style="font-size: xx-small;" v-html="formatUnit(item.danWei)"></span>
                                </template>
                            </MkInput>
                        </el-col>
                        <el-col :span="12">
                            <MkDateTime v-model.trim="item.jianYanShiJian" :isEdit="isEdit" minWidth="100%" />
                        </el-col>
                    </el-row>
                </el-form-item>
            </MkForm>
        </MkDialogEdit>
    </MkPanel>
</template>
<script lang="ts" setup>
// 输血前检验
import { ref } from 'vue'
import { showSuccess, timeFormat, clone, isNull, clog } from '/@/utils'
import { BasShuXueJianYanApi, BasShuXueJianYanAllOutput } from '/@/api/bas/BasShuXueJianYan';
import { TraShenQingJianYan } from '/@/api/tra/TraShenQing';
import { getBasShuXueJianYanList } from '/@/stores/baseInfo';

// 检验结果
const list = defineModel({ required: true, default: [] as TraShenQingJianYan[] })



const dialogRef = ref();
const basList = ref<BasShuXueJianYanAllOutput[]>([])
const listEdit = ref<any[]>([]) // 编辑对话框临时用
const isEdit = ref(false)

onMounted(async () => {
    basList.value = await getBasShuXueJianYanList();
})

// 监听list的变化
watch(list, (newList, oldList) => {
    // 处理上箭头、下箭头、阳性
    list.value.forEach(item => {
        var basItem = basList.value.find(basItem => basItem.mingCheng == item.mingCheng)
        if (!basItem) {
            return;
        }
        item.basShuXueJianYanId = basItem.id;
        // 添加单位
        if (isNull(item.danWei)) {
            item.danWei = basItem.danWei;
        }

        // 处理上箭头、下箭头、阳性
        if (isNull(item.jieGuo)) {
            return;
        } else {
            item.tag = ''
            if (!isNull(basItem.shangXianGongShi)) {
                // 上限
                item.tag = jiSuan(basItem.shangXianGongShi, item.jieGuo) ? '向上' : item.tag
            }
            if (!isNull(basItem.xiaXianGongShi)) {
                // 下限
                item.tag = jiSuan(basItem.xiaXianGongShi, item.jieGuo) ? '向下' : item.tag
            }
            if (!isNull(basItem.yangXingGongShi)) {
                // 阳性
                item.tag = jiSuan(basItem.yangXingGongShi, item.jieGuo) ? '阳' : item.tag
            }
        }
    })
})


// 公式计算 
// gs: 公式,例如 "val > 50" 或 "val != '阴'"
// val: 检验结果
const jiSuan = (gs: string, val: any) => {
    let result = new Function('val', 'return ' + gs)(val); // 动态执行函数
    return result;
}

// 处理单位的数字上标
const formatUnit = (unit) => {
    if (unit) {
        return unit.replace(/\^(.)/g, (match, p1) => `<sup>${p1}</sup>`);
    } else {
        return ''
    }
};

const edit = () => {
    listEdit.value = clone(list.value);
    isEdit.value = false;
    dialogRef.value.show();
}

const submit = () => {
    // 保存 listEdit
    list.value = clone(listEdit.value);
    dialogRef.value.close()
}

</script>
<style lang="scss" scoped>
.text {
    white-space: nowrap;
    display: inline-block;
}

.editBox {
    margin-left: 2em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5em;
    height: 2em;
    flex-shrink: 0;
}

.editBox:hover {
    background-color: #f8f8f8;
}
</style>